<template>
  <view class="container">
    <scroll-view scroll-y="true" style="box-sizing: border-box; width: 100%; height: 100vh" v-if="Object.values(userinfo).length != 0">
      <image src="../../../static/img/mybgc.png" mode="aspectFill" style="box-sizing: border-box; width: 100%; height: 480rpx"></image>
      <view class="title" :style="[top]">我的</view>
      <!-- 用户信息 -->
      <view class="userinfo" @click="gouserinfo">
        <view style="display: flex; align-items: center">
          <image
            :src="imgUrl + userinfo22.avatar"
            mode="aspectFill"
            style="width: 110rpx; height: 110rpx; border-radius: 100rpx 100rpx 100rpx 100rpx; opacity: 1; border: 2rpx solid #ffffff"
          ></image>
          <view style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #ffffff; margin-left: 30rpx">
            {{ userinfo22.username }}
          </view>
        </view>
        <uni-icons type="right" size="20" color="#fff"></uni-icons>
      </view>
      <!-- 订单、钱包、教师认证模块 -->
      <view class="order">
        <view class="header">
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 30rpx; color: #222222">全部订单</view>
          <uni-icons type="right" size="20" color="#000"></uni-icons>
        </view>
        <!-- 订单 -->
        <view style="display: flex; align-items: center; justify-content: space-evenly; margin-top: 30rpx">
          <view class="orderitem" @click="goorder(0)">
            <image src="../../../static/icon/order.png" mode="aspectFill" style="width: 50rpx; height: 50rpx; margin-bottom: 10rpx"></image>
            <view>全部订单</view>
          </view>
          <view class="orderitem" @click="goorder(1)">
            <image src="../../../static/icon/waitpay.png" mode="aspectFill" style="width: 50rpx; height: 50rpx; margin-bottom: 10rpx"></image>
            <view>待付款</view>
          </view>
          <view class="orderitem" @click="goorder(6)">
            <image src="../../../static/icon/refuse.png" mode="aspectFill" style="width: 50rpx; height: 50rpx; margin-bottom: 10rpx"></image>
            <view>已拒绝</view>
          </view>
          <view class="orderitem" @click="goorder(3)">
            <image src="../../../static/icon/reciveorder.png" mode="aspectFill" style="width: 50rpx; height: 50rpx; margin-bottom: 10rpx"></image>
            <view>已接单</view>
          </view>
          <view class="orderitem" @click="goorder(4)">
            <image src="../../../static/icon/reciveorder.png" mode="aspectFill" style="width: 50rpx; height: 50rpx; margin-bottom: 10rpx"></image>
            <view>已完结</view>
          </view>
        </view>
      </view>

      <!-- 个人功能模块 -->
      <view class="usergn">
        <!-- 标题 -->
        <view class="title2">
          <view style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">个人功能</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <!-- 功能模块 -->
        <view style="display: flex; flex-wrap: wrap; box-sizing: border-box; padding: 0 36rpx; margin-top: 60rpx">
          <view class="functionitem" @click="gomyteacher">
            <image src="../../../static/icon/myteacher.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
            <view class="name">我的老师</view>
          </view>
          <view class="functionitem" @click="gomygrades">
            <image src="../../../static/icon/mygrades.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
            <view class="name">成绩录入</view>
          </view>
          <view class="functionitem" @click="gomycollect">
            <image src="../../../static/img/mycollect.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
            <view class="name">我的收藏</view>
          </view>
          <view class="functionitem" @click="gomydata">
            <image src="../../../static/img/mydata.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
            <view class="name">我的资料</view>
          </view>
          <view class="functionitem" @click="gohomework">
            <image src="../../../static/icon/myhomework.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
            <view class="name">我的作业</view>
          </view>
          <view class="functionitem" @click="gomyyhj">
            <image src="../../../static/icon/myyhj.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
            <view class="name">优惠券</view>
          </view>
          <view class="functionitem" @click="goinvitecode">
            <image src="../../../static/icon/invitecode.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
            <view class="name">邀请码</view>
          </view>
          <view class="functionitem" @click="goblacklist">
            <image src="../../../static/img/blacklist.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
            <view class="name">黑名单</view>
          </view>
          <view class="functionitem">
            <button open-type="contact">
              <image src="../../../static/img/mykefu.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
              <view class="name">我的客服</view>
            </button>
          </view>
          <view class="functionitem" @click="goteacher">
            <image src="../../../static/icon/toteacher.png" mode="aspectFill" style="width: 70rpx; height: 70rpx; margin-bottom: 12rpx"></image>
            <view class="name">教师端</view>
          </view>
        </view>
      </view>
      <!-- 协议设置等 -->
      <view class="xieyi">
        <view class="xieyiitem" @click="$refs.popup.open()">
          <view class="navtitle">申请退款</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="xieyiitem" @click="goquestions">
          <view class="navtitle">疑问答疑</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="xieyiitem" @click="goysxy">
          <view class="navtitle">隐私协议</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="xieyiitem" @click="gofwxy">
          <view class="navtitle">服务协议</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>

        <view class="xieyiitem" @click="gohezuo">
          <view class="navtitle">商务合作</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>

        <view class="xieyiitem" @click="gozxxy">
          <view class="navtitle">注销协议</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="xieyiitem" @click="clear">
          <view class="navtitle">清理缓存</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="xieyiitem" @click="gosetting">
          <view class="navtitle">账号设置</view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <!-- 占位盒子 -->
        <view style="box-sizing: border-box; width: 750rpx; height: 100rpx"></view>
      </view>
    </scroll-view>
    <!-- 退款原因 -->
    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <view class="refund">
        <view class="header">
          <text></text>
          <text style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 32rpx; color: #222222">退款原因</text>
          <image src="../../../static/icon/close.png" @click="$refs.popup.close()" mode="aspectFill" style="width: 40rpx; height: 40rpx"></image>
        </view>
        <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 26rpx; color: #222222; margin-top: 38rpx; margin-bottom: 44rpx; text-align: center">
          注：如果课程已经开始，只返还未上课的课程金额，退款申请后已预约的课时自动取消预约
        </view>
        <uni-data-select v-model="value" :localdata="orderlist" @change="change" placeholder="请选择订单号" :clear="true"></uni-data-select>
        <textarea class="txt" name="" v-model="reason" id="" maxlength="-1" cols="30" rows="10" placeholder="请输入退款原因"></textarea>
        <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 26rpx; color: #ff0000; margin-bottom: 66rpx; text-align: center">
          审核通过后退款金额即可原路返还，请耐心等待~
        </view>
        <view class="btn" @click="refundbtn">提交</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { onMounted } from 'vue';
// import { store } from '@/store';
import { mapState } from 'vuex';
import Vue from 'vue';
export default {
  computed: {
    ...mapState({
      userinfo22: (state) => state.userinfo
    })
  },
  data() {
    return {
      isiphone: false,
      top: {
        paddingTop: '0rpx'
      },
      userinfo: {},
      imgUrl: '', // 图片的基地址路径
      range: [
        { value: 0, text: '篮球' },
        { value: 1, text: '足球' },
        { value: 2, text: '游泳' }
      ], // 下拉款的数据
      value: null, // 下拉框选中的数据
      orderlist: [], // 订单号列表
      reason: '', // 退款原因
      refundobj: {}, // 退款的数据
      refundid: '' //退款的订单id
    };
  },
  methods: {
    // 获取订单号列表
    async getorderlist() {
      const res = await uni.$http.post('/refund/order');
      // console.log('订单号列表---', res);
      this.orderlist = res.data.data;
      this.orderlist.forEach((item) => {
        Vue.set(item, 'value', item.id);
        Vue.set(item, 'text', item.order_sn);
      });
      console.log('订单号列表', this.orderlist);
    },
    // 退款订单编号切换
    async change(e) {
      console.log('订单号切换', e);
      if (!e) {
        return;
      }
      this.refundid = e;
      // 切换时检查订单是否可以退款
      const res = await uni.$http.post('/refund/index', { order_id: e });
      console.log('检查订单号', res);
      this.refundobj = res.data.data;
    },
    // 提交退款
    async refundbtn() {
      // 将退款原因追加到对象中
      this.refundobj.reason = this.reason;
      this.refundobj.order_id = this.refundid;
      console.log(this.refundobj);

      // 发起退款接口
      const res = await uni.$http.post('/refund/add', { ...this.refundobj });
      console.log('退款', res);
      if (res.data.code == 1) {
        // 退款成功关闭弹框
        this.$refs.popup.close();
      }
      uni.showToast({
        title: res.data.msg,
        icon: 'none'
      });
    },
    // 清除缓存
    clear() {
      uni.clearStorage();
      uni.showToast({
        title: '缓存已全部清理'
      });
    },
    // 获取用户信息
    async getuserinfo() {
      const res = await uni.$http.post('/user/profile');
      console.log('用户信息', res);
      this.userinfo = res.data.data;
      // this.userinfo = this.$store.state.userinfo;
      uni.setStorageSync('rzstatus', this.userinfo.position_status);
    },
    // 跳转到个人资料
    gouserinfo() {
      uni.navigateTo({
        url: '/parents/userinfo/userinfo'
      });
    },
    // 跳转到我的订单页
    goorder(index) {
      uni.navigateTo({
        url: '/parents/allorder/allorder?type=' + index
      });
    },
    //跳转到我的教师页面
    gomyteacher() {
      uni.navigateTo({
        url: '/parents/myteacher/myteacher'
      });
    },
    // 跳转到我的成绩
    gomygrades() {
      uni.navigateTo({
        url: '/parents/mygrades/mygrades'
      });
    },
    // 跳转到我的收藏
    gomycollect() {
      uni.navigateTo({
        url: '/parents/mycollect/mycollect'
      });
    },
    // 跳转到我的资料
    gomydata() {
      uni.navigateTo({
        url: '/parents/mydata/mydata'
      });
    },
    // 跳转到我的作业
    gohomework() {
      uni.navigateTo({
        url: '/parents/homeworklist/homeworklist'
      });
    },
    // 跳转到我的优惠券
    gomyyhj() {
      uni.navigateTo({
        url: '/parents/yhj/yhj'
      });
    },
    // 跳转到邀请码
    goinvitecode() {
      uni.navigateTo({
        url: '/parents/invitecode/invitecode'
      });
    },
    // 跳转到黑名单
    goblacklist() {
      uni.navigateTo({
        url: '/parents/blacklist/blacklist'
      });
    },
    // 跳转到疑问答疑
    goquestions() {
      uni.navigateTo({
        url: '/pages/question/question'
      });
    },
    // 跳转到隐私协议
    goysxy() {
      uni.navigateTo({
        url: '/pages/ysxy/ysxy'
      });
    },
    // 服务协议
    gofwxy() {
      uni.navigateTo({
        url: '/pages/fwxy/fwxy'
      });
    },
    // 商务合作
    gohezuo() {
      uni.navigateTo({
        url: '/pages/swhz/swhz'
      });
    },
    // 注销协议
    gozxxy() {
      uni.navigateTo({
        url: '/pages/zxxy/zxxy'
      });
    },
    // 设置
    gosetting() {
      uni.navigateTo({
        url: '/pages/setting/setting'
      });
    },
    // 跳转到教师端
    goteacher() {
      if (uni.getStorageSync('rzstatus') == 1) {
        return uni.navigateTo({
          url: '/pages/daishenhe/daishenhe'
        });
        //  uni.showToast({
        //   title: '教师认证正在审核中',
        //   icon: 'none'
        // });
      } else if (uni.getStorageSync('rzstatus') == 3) {
        return uni.navigateTo({
          url: '/pages/rzstatus/rzstatus'
        });
        // return uni.showToast({
        //   title: '审核失败，请重新认证',
        //   icon: 'none'
        // });
      } else if (uni.getStorageSync('rzstatus') == 0) {
        return uni.navigateTo({
          url: '/teacher/jsrz/jsrz'
        });
      }
      uni.reLaunch({
        url: '/pages/index/index?status=' + 2
      });
    }
  },

  created() {
    console.log('-------1-4--', this.$store);
    // 获取订单号列表
    this.getorderlist();
    // 获取用户信息
    this.getuserinfo();
    // 图片的基地址路径
    this.imgUrl = this.imgurl;
    // 适配苹果的刘海
    const app = getApp();
    this.isiphone = app.$vm.isIPhone;
    if (this.isiphone) {
      this.top.paddingTop = app.$vm.liuhai + 'rpx';
    }
  },
  onBackPress(options) {
    console.log('from:' + options.from);
    console.log('-----back--press---');
  },
  onLoad() {
    console.log('---onload---');
  },
  onShow() {
    console.log('---onshow---');
  },
  onReady() {
    console.log('---onReady---');
  },
  activated() {
    console.log('---activated-----');
  },
  mounted() {
    console.log('---mounted-----');
  }
};
</script>

<style lang="scss" scoped>
button {
  padding: 0;
  margin: 0;
  background-color: transparent;
  line-height: 38rpx;
}
button::after {
  border: none;
}

.container {
  box-sizing: border-box;
  width: 100%;
  .title {
    position: absolute;
    top: 60rpx;
    left: 345rpx;
    color: #fff;
  }
  .userinfo {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 200rpx;
    left: 0rpx;
    align-items: center;
    width: 100%;
    padding: 0 60rpx;
  }
  .order {
    position: absolute;
    top: 350rpx;
    left: 0;
    box-sizing: border-box;
    width: 710rpx;
    height: 228rpx;
    margin: 20rpx;
    background: #ffffff;
    padding: 30rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .orderitem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
  .usergn {
    box-sizing: border-box;
    width: 710rpx;
    height: 417rpx;
    margin: 20rpx;
    margin-top: 105rpx;
    padding: 30rpx 0;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .title2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30rpx;
    }
  }
  .functionitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 20%;
    margin-bottom: 38rpx;

    .name {
      font-size: 26rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #222222;
    }
  }
  .xieyi {
    box-sizing: border-box;
    margin: 20rpx;
    margin-top: 0;
    padding: 30rpx;
    width: 710rpx;
    height: 600rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .xieyiitem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40rpx;
      .navtitle {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #222222;
      }
    }
  }
  .refund {
    box-sizing: border-box;
    padding: 46rpx 52rpx;
    width: 750rpx;
    height: 946rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .txt {
      box-sizing: border-box;
      width: 670rpx;
      height: 330rpx;
      background: #f8f8f8;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      border: 2rpx solid #f1f1f1;
      margin-top: 24rpx;
      padding: 24rpx;
      margin-bottom: 22rpx;
    }
    .btn {
      box-sizing: border-box;
      width: 670rpx;
      height: 90rpx;
      background: #3553e8;
      text-align: center;
      color: #fff;
      line-height: 90rpx;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
}
</style>
<style>
page {
  box-sizing: border-box;
  width: 750rpx;
  background-color: #f9f9f9;
}
</style>
